<template>
  <div class="additem">
    <el-form
      ref="form"
      :model="form"
      label-width="115px"
      size="medium"
      :rules="rules"
    >
      <el-card style="margin-bottom: 20px; height: 500px" class="box-card">
        <div slot="header" class="clearfix title_text">
          <div class="title_box">
            <img
              class="title_img"
              src="../../../assets/images/myAgent/jiben.png"
              alt=""
            />
            <div style="margin-left: 20px">基本信息</div>
          </div>
        </div>
        <el-row style="margin-bottom: -20px" :gutter="20">
          <el-col :span="12">
            <el-form-item label="代理商名称：" prop="name">
              <el-input
                placeholder="请输入代理商名称"
                v-model="form.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代理商姓名：" prop="nickname">
              <el-input
                placeholder="请输入代理商姓名"
                v-model="form.nickname"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号：" prop="phone">
              <el-input
                placeholder="请输入手机号"
                v-model="form.phone"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录账号：" prop="account">
              <el-input
                placeholder="请输入登录账号"
                v-model="form.account"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设置密码：" prop="password">
              <el-input
                show-password
                placeholder="请输入密码"
                v-model="form.password"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址：" prop="address_more">
              <el-input
                placeholder="请输入详细地址"
                v-model="form.address_more"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="归属上级：" prop="password">
              <el-input
                class="input_text"
                disabled
                v-model="form.superiors"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地址：" prop="sendAddress">
              <el-cascader
                style="width: 350px"
                :append-to-body="false"
                v-model="form.sendAddress"
                readonly="readonly"
                size="medium"
                :props="optionProps"
                :options="options"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="代理等级：">
              <el-select
                disabled
                style="width: 350px"
                v-model="form.agency"
                placeholder="请选择"
              >
                <el-option label="一级代理" value="1"> </el-option>
                <el-option label="二级代理" value="2"> </el-option>
                <el-option label="三级代理" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-bottom: 20px; height: 239px" class="box-card">
        <div slot="header" class="clearfix title_text">
          <div slot="header" class="clearfix title_text">
            <div class="title_box">
              <img
                class="title_img"
                src="../../../assets/images/myAgent/daili.png"
                alt=""
              />
              <div style="margin-left: 20px">代理设置</div>
            </div>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分配比例：" prop="setpercent">
              <el-col :span="12">
                <el-input
                  placeholder="百分比 1~100之间"
                  v-model="form.setpercent"
                  clearable
                >
                  <template slot="append">%</template>
                </el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代理状态：">
              <el-switch v-model="form.states == 1 ? true : false"> </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生效方式：" prop="indate">
              <el-select
                @change="changIndate"
                v-model="form.indate"
                placeholder="请选择"
              >
                <el-option label="永久有效" value="1"> </el-option>
                <el-option label="固定日期" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="form.indate == 2" :span="12">
            <el-form-item label="有效日期" prop="time">
              <el-date-picker
                v-model="form.time"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card;height: 239px">
        <div slot="header" class="clearfix title_text">
          <div class="title_box">
            <img
              class="title_img"
              src="../../../assets/images/myAgent/quanxian.png"
              alt=""
            />
            <div style="margin-left: 20px">代理设置</div>
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单权限：" prop="power">
              <el-col :span="12">
                <el-cascader
                  collapse-tags
                  style="width: 100%"
                  v-model="form.power"
                  :options="power"
                  :props="{ multiple: true }"
                  clearable
                ></el-cascader>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结算成本" prop="list">
              <el-col :span="12">
                <el-select
                  @change="openpayRate"
                  style="width: 100%"
                  v-model="list"
                  multiple
                >
                  <el-option
                    v-for="item in mode"
                    :key="item.label + '_' + item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <!-- <el-cascader
                  @change="costList"
                  v-model="list"
                  :options="mode"
                  :props="{ multiple: true }"
                  clearable
                ></el-cascader> -->
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="margin-bottom: 10px"
          v-for="(item, index) in provenceArray"
          :key="item.id"
        >
          <el-table :data="[item]" style="width: 100%">
            <el-table-column prop="name" label="渠道名称" width="95">
            </el-table-column>
            <el-table-column prop="rate" label="支付宝费率(%)" width="150">
              <template slot-scope="scope">
                <el-input
                  @change="rateChange(index, item.zfb_rate, 'zfb_rate')"
                  v-model="item.zfb_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="rate" label="微信费率(%)" width="150">
              <template slot-scope="scope">
                <el-input
                  @change="rateChange(index, item.wx_rate, 'wx_rate')"
                  v-model="item.wx_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="rate"
              label="银联借记卡(≤1000元)费率(%)"
              width="192"
            >
              <template slot-scope="scope">
                <el-input
                  @change="
                    rateChange(index, item.debit_min_rate, 'debit_min_rate')
                  "
                  v-model="item.debit_min_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="rate"
              label="银联借记卡（>1000元)费率(%)"
              width="192"
            >
              <template slot-scope="scope">
                <el-input
                  @change="
                    rateChange(index, item.debit_max_rate, 'debit_max_rate')
                  "
                  v-model="item.debit_max_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="rate"
              label="银联借记卡封顶额（元）"
              width="180"
            >
              <template slot-scope="scope">
                <el-input
                  @change="
                    rateChange(index, item.debit_all_rate, 'debit_all_rate')
                  "
                  v-model="item.debit_all_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="rate"
              label="银联贷记卡(≤1000元)费率(%)"
              width="190"
            >
              <template slot-scope="scope">
                <el-input
                  @change="
                    rateChange(index, item.credit_min_rate, 'credit_min_rate')
                  "
                  v-model="item.credit_min_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="rate"
              label="银联贷记卡(>1000元)费率(%)"
              width="190"
            >
              <template slot-scope="scope">
                <el-input
                  @change="
                    rateChange(index, item.credit_max_rate, 'credit_max_rate')
                  "
                  v-model="item.credit_max_rate"
                  placeholder="范围值：0.25-0.6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div
                  @click="handleDelete(scope.$index, scope.row.id)"
                  style="color: #0067d9"
                >
                  删除
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="button_box">
        <div>
          <el-button
            style="width: 149px; height: 52px; color: #3f75ff"
            @click="addAgent(1)"
            >取消</el-button
          >
          <el-button
            style="
              width: 149px;
              height: 52px;
              color: #ffffff;
              background-color: #3f75ff;
            "
            @click="addAgent"
            >确认添加</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { addressFun } from "../../../util/address.js"
import { tipsFun } from "../../../util/request.js"
export default {
  data () {
    return {
      list: [],
      mode: [
        {
          value: 1,
          label: "邮储"
        },
        {
          value: 2,
          label: "邮储线上支付"
        },
        {
          value: 3,
          label: "邮储手机银行"
        },
        {
          value: 4,
          label: "利群"
        },
        {
          value: 5,
          label: "运通支付"
        },
        {
          value: 6,
          label: "工商银行支付"
        }
      ],
      power: [
        {
          value: 1,
          label: "首页",
          children: [
            {
              value: 2,
              label: "数据",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" }
              ]
            },
            {
              value: 7,
              label: "每日",
              children: [
                { value: 8, label: "南京" },
                { value: 9, label: "苏州" },
                { value: 10, label: "无锡" }
              ]
            },
            {
              value: 12,
              label: "客户",
              children: [
                { value: 13, label: "杭州" },
                { value: 14, label: "宁波" },
                { value: 15, label: "嘉兴" }
              ]
            }
          ]
        },
        {
          value: 17,
          label: "代理商",
          children: [
            {
              value: 18,
              label: "添加代理商",
              children: [
                { value: 19, label: "西安" },
                { value: 20, label: "延安" }
              ]
            },
            {
              value: 21,
              label: "代理商详情",
              children: [
                { value: 22, label: "乌鲁木齐" },
                { value: 23, label: "克拉玛依" }
              ]
            }
          ]
        }
      ],
      provenceArray: [],
      optionProps: {
        value: "code",
        label: "name",
        children: "sons"
      },
      payRateArray: [], //已选中的通道信息
      checkList: [], //选择费率通道
      loading: false,
      options: addressFun(),
      form: {
        time: "",
        power: [],
        mode: [],
        superiors: "乐易呗平台",
        agency: "一级代理",
        password: "",
        account: "",
        id: "",
        name: "",
        nickname: "",
        direct_connect_rate: "", // 直连
        setpercent: "", // 分润结算比例
        phone: "",
        contact_person: "",
        address_more: "",
        text: "",
        if_signing: 0,
        cooperation_type: "",
        address_province: [],
        address_city: [],
        address_area: [],
        truetime: "关闭", // 是否开启永久有效
        begin_time: "",
        end_time: "",
        withdrawals_bank: [],
        bank_card_holder: "",
        bank_card_number: "",
        id_card_number: "",
        pwid: [],
        avatar: "", // 头像
        resource: "1",

        codetype: "", // 合作类型选择框验证使用
        rerate: "", // 间联输入框验证使用
        aisleid: "" /*通道id*/,
        id_card_just: "", //身份证正面
        id_card_back: "", //身份证反面
        bank_img: "", //银行卡照片
        sendAddress: [], //地址省市区
        states: "1",
        indate: "1"
      },
      formChannel: {
        zfb_rate: [
          { required: true, message: "请输入代理商名称", trigger: "blur" }
        ]
      },
      directList: "", // 直连的最小值

      levelList: "", // 等级名称
      rateList: [], // 通道信息
      bank: "",

      rules: {
        list: [{ required: true, message: "请选择生效时间", trigger: "blur" }],
        time: [{ required: true, message: "请选择生效时间", trigger: "blur" }],
        name: [
          { required: true, message: "请输入代理商名称", trigger: "blur" }
        ],
        nickname: [
          { required: true, message: "请输入代理商姓名", trigger: "blur" }
        ],
        avatar: [
          { required: true, message: "请上传代理商头像", trigger: "blur" }
        ],
        password: [
          {
            pattern: /^.{0,8}$/,
            message: "密码不能超过8位",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
            message: "请输入正确格式的联系电话",
            trigger: "blur"
          }
        ],
        power: [{ required: true, message: "请选择菜单权限", trigger: "blur" }],
        agency: [
          { required: true, message: "请选择代理等级", trigger: "blur" }
        ],
        account: [
          { required: true, message: "请输入登录账号", trigger: "blur" }
        ],
        sendAddress: [
          { required: true, message: "请选择地区", trigger: "blur" }
        ],
        address_more: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        setpercent: [
          { required: true, message: "请输入分润结算比例", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var reg = /^(0|[1-9]\d?|100)$/
              if (reg.test(value) == false && value != "") {
                callback(new Error("请输入正确的分润比例区间(整数 0-100)"))
              } else {
                callback()
              }
            },
            trigger: "blur"
          }
        ],
        withdrawals_bank: [
          { required: true, message: "请选择提现银行", trigger: "blur" }
        ],
        bank_card_holder: [
          { required: true, message: "请输入持卡人", trigger: "blur" }
        ],
        bank_card_number: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var reg = /^\d{1,22}$/
              if (reg.test(value) == false && value != "") {
                callback(new Error("请输入正确的银行卡格式"))
              } else {
                callback()
              }
            },
            trigger: "change"
          }
        ],
        id_card_number: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var reg =
                /(^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$)|(^((\s?[A-Za-z])|([A-Za-z]{2}))\d{6}(\([0−9aA]\)|[0-9aA])$)|(^[a-zA-Z][0-9]{9}$)|(^[1|5|7][0-9]{6}\([0-9Aa]\))/
              if (reg.test(value) == false && value != "") {
                callback(new Error("请输入正确的身份证号码格式"))
              } else {
                callback()
              }
            },
            trigger: "change"
          }
        ]
      },
      type: "" /*保存一级代理商允许二级代理商可设置的合作类型*/,
      owntype: "" /*保存二级代理商原有的的合作类型*/,
      child_direct: 0.6 /*直连费率最大值*/
    }
  },
  watch: {
    list () {
      if (this.list.length == 0) {
        console.log("现在开始执行")
        this.provenceArray = []
      }
    }
  },
  mounted () {
    const id = this.$route.params.id
  },
  methods: {
    rateChange (index, item, type) {
      if (/^(0\.[2-5]\d|0\.60)$/.test(item) && item != "") {
        console.log("正确")
      } else {
        console.log(this.provenceArray[index])
        for (let key in this.provenceArray[index]) {
          console.log("它里面的值", this.provenceArray[index][key])
          if (key == type) {
            this.provenceArray[index][key] = ""
          }
        }
        tipsFun(this, "error", '"请输入正确的费率区间0.25-0.6,保留两位小数"')
      }
    },
    costList () {
      var _this = this.list
      console.log("选择的成本", this.list[0][0])
    },
    // 删除数据
    handleDelete (index, arr) {
      console.log("要删除的数据", index, arr)
      console.log(this.provenceArray[index])
      this.provenceArray.splice(index, 1)
      this.list.splice(index, 1)
    },
    changIndate () {
      console.log(this.form.indate)
    },
    //判断所选费率通道是否已选中
    isInArray (arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true
        }
      }
      return false
    },

    onInputBlurWx (index, item) {
      var value = item.wx_rate
      var min = Math.round(item.minRate.wx_rate * 100 * 100) / 100
      var max = Math.round(item.maxRate.wx_rate * 100 * 100) / 100
      var reg = /^([0]{1}\.[2-6]{1}[0-9]{0,1})$/

      if (!reg.test(value) || value == "" || value > max || value < min) {
        this.payRateArray[index].wx_text =
          "请输入正确的费率区间(" + min + "-" + max + "),保留两位小数"
        return
      } else {
        this.payRateArray[index].wx_text = ""
      }
    },
    onInputBlurAli (index, item) {
      var value = item.ali_rate
      var min = Math.round(item.minRate.ali_rate * 100 * 100) / 100
      var max = Math.round(item.maxRate.ali_rate * 100 * 100) / 100
      var reg = /^([0]{1}\.[2-6]{1}[0-9]{0,1})$/
      if (!reg.test(value) || value == "" || value > max || value < min) {
        this.payRateArray[index].ali_text =
          "请输入正确的费率区间(" + min + "-" + max + "),保留两位小数"
        return
      } else {
        this.payRateArray[index].ali_text = ""
      }
    },
    onInputBlurYsf (index, item) {
      var value = item.ysf_rate
      var min = Math.round(item.minRate.ysf_rate * 100 * 100) / 100
      var max = Math.round(item.maxRate.ysf_rate * 100 * 100) / 100
      var reg = /^([0]{1}\.[2-6]{1}[0-9]{0,1})$/

      if (!reg.test(value) || value == "" || value > max || value < min) {
        this.payRateArray[index].ysf_text =
          "请输入正确的费率区间(" + min + "-" + max + "),保留两位小数"
        return
      } else {
        this.payRateArray[index].ysf_text = ""
      }
    },
    next (active) {
      var vm = this
      if (active > vm.active) {
        vm.$refs["form"].validate(function (bol) {
          if (!bol) {
            return false
          }
          if (active == 3) {
            // 验证合作类型
            var arr = vm.payRateArray
            var rateCount = arr.length
            for (var i = 0; i <= rateCount - 1; i++) {
              console.log(arr[i])
              vm.onInputBlurWx(i, arr[i])
              vm.onInputBlurAli(i, arr[i])
              vm.onInputBlurYsf(i, arr[i])
              if (
                arr[i].wx_text != "" ||
                arr[i].ali_text != "" ||
                arr[i].ysf_text != ""
              ) {
                return vm.$message({
                  type: "info",
                  message:
                    "请输入正确的" + arr[i].passageway + "费率,并保留两位小数"
                })
              }
            }
          }
          vm.active = active
        })
      } else {
        vm.$nextTick(() => {
          vm.$refs["form"].resetFields()
        })
        vm.active = active
      }
    },
    handleChange (value) {
      console.log(value)
    },
    //上传图片
    UploadImg (type) {
      var that = this
      top.layui.vueCommon.toOnlyUpload(function (arr) {
        switch (type) {
          case 1:
            that.form.avatar = arr //代理商头像图片上传
            break
          case 2:
            that.form.id_card_just = arr //身份证正面图片上传
            break
          case 3:
            that.form.id_card_back = arr //身份证反面图片上传
            break
          case 4:
            that.form.bank_img = arr //银行卡图片上传
            break
        }
      })
    },

    //删除上传的图片
    delImg (val, type) {
      var that = this
      switch (type) {
        case 1:
          var imageUrl = that.form.avatar
          break
        case 2:
          var imageUrl = that.form.id_card_just
          break
        case 3:
          var imageUrl = that.form.id_card_back
          break
        case 4:
          var imageUrl = that.form.bank_img
          break
      }
      imageUrl.splice(val, 1)
    },

    //获取省份信息
    getProvence () {
      var _this = this
    },

    //市/区加载
    handleItemChange (val) {
      var _this = this
      if (val[1]) {
        var type = 1
      } else {
        var type = 2
      }
    },
    //选中后赋值，展示卡片费率输入框
    openpayRate () {
      var arr = this.mode
      var checkArr = this.list
      // console.log('发生了变化', checkArr)
      for (var i = 0; i < checkArr.length; i++) {
        var ss = this.provenceArray.some(item => item.id == checkArr[i])
        if (!ss) {
          this.provenceArray.push({
            id: checkArr[i],
            name: this.mode[checkArr[i] - 1].label,
            wx_rate: "",
            zfb_rate: "",
            credit_max_rate: "",
            credit_min_rate: "",
            debit_all_rate: "",
            debit_max_rate: "",
            debit_min_rate: ""
          })
        } else {
          console.log("数据发生改变", this.list.length == 0)
          this.provenceArray = this.provenceArray.filter(
            item => item.id === checkArr[i]
          )
        }
      }
      // for (let i = 0; i < checkArr.length; i++) {
      //   console.log(this.provenceArray[i])
      //   if (this.provenceArray[i] && this.provenceArray[i].id) {
      //     if (checkArr[i] == this.provenceArray[i].id) {
      //       console.log('这条数据已经添加', this.mode[i])
      //       continue
      //     }
      //     if (this.provenceArray[i].id) {
      //     }
      //   }
      //   this.provenceArray.push({
      //     id: checkArr[i],
      //     name: this.mode[checkArr[i] - 1].label,
      //     wx_rate: '',
      //     zfb_rate: '',
      //     credit_max_rate: '',
      //     credit_min_rate: '',
      //     debit_all_rate: '',
      //     debit_max_rate: '',
      //     debit_min_rate: ''
      //   })
      // }
    },
    addAgent (type) {
      //添加代理商
      var that = this
      if (type == 1) {
        // window.history.back()
        this.$router.go(-1)
        return
      }
      if (this.list.length == 0) {
        tipsFun(this, "error", "结算成本不能为空")
        return
      }
      var data = that.form

      const formRef = that.$refs["form"]
      formRef.validate(isValid => {
        if (isValid) {
          if (that.disbursement()) {
            console.log("参数数据", data)
          }
        }
      })
    },
    disbursement () {
      var arr = this.provenceArray
      console.log("选择的渠道", arr)
      for (let i = 0; i < arr.length; i++) {
        console.log("循环了几次", i)
        if (
          arr[i].wx_rate == "" ||
          arr[i].zfb_rate == "" ||
          arr[i].credit_max_rate == "" ||
          arr[i].credit_min_rate == "" ||
          arr[i].debit_all_rate == "" ||
          arr[i].debit_max_rate == "" ||
          arr[i].debit_min_rate == ""
        ) {
          tipsFun(this, "error", "费率不能为空")
          return false
        } else {
          console.log("通过")
          return true
        }
      }
    },
    getData () {
      var vm = this
      var id = vm.form.id
      if (id != "") {
        vm.loading = true
      }
    },
    getDatas () {
      var vm = this
      var id = vm.form.id
      if (id != "") {
      }
    },
    /*获取此二级代理商可编辑的合作类型及进件费率*/
    getRate () {
      var that = this
    }
  },
  async created () {
    await this.getProvence()
    this.getData()
    // this.getRate();
    this.getDatas()
  }
}
</script>

<style scoped>
/deep/ .el-table__cell {
  text-align: center;
}
/deep/ .el-table__body {
  border-collapse: separate;
  border-spacing: 0px 20px;
}

/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/deep/ .el-table th,
.el-table tr {
  background-color: transparent;
}

/* 删除单元格底部横线 */
/deep/ .el-table td {
  border-bottom: 0px solid #dfe6ec !important;
  /*margin-bottom: 10px;*/
}

/*去掉底部白线*/
/deep/.el-table::before {
  height: 0px;
}

body {
  background-color: #fafcff;
}
.title_box {
  display: flex;
  align-items: center;
}
.title_img {
  width: 40px;
  height: 40px;
}
.button_box {
  height: 200px;
  display: flex;
  justify-content: space-evenly;
  margin: 65px 0;
}
.buttpn {
  width: 149px;
  height: 52px;
  border-radius: 4px;
  opacity: 1;
  border: 1px solid #3f75ff;
}
.input_text {
  width: 350px;
  color: #a4a4a4 !important ;
}
.item_text {
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
}
.title_text {
  font-size: 18px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #3c3c3c;
}
.el-row {
  margin-bottom: 0 !important;
}
.add_box {
  padding: 20px;
  height: 750px;
  background-color: #fafcff;
}
.el-checkbox {
  width: 120px;
  margin: 2px 10px 10px;
}

.el-radio {
  line-height: 38px;
}

.el-select {
  width: 30%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}

.left_Line {
  height: 24px;
  line-height: 24px;
  padding-left: 5px;
  border-left: 2px solid #409eff;
  margin-bottom: 20px;
}

.imgurls {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: rgb(204, 204, 204);
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_bor {
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin: 0 10px 10px 0;
  border: 1px dashed rgb(204, 204, 204);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgurls {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: rgb(204, 204, 204);
  display: flex;
  justify-content: center;
  align-items: center;
}

.Simg {
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin: 0 10px 10px 0;
  border: 1px dashed rgb(204, 204, 204);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.Simg:hover > .dlt {
  display: block;
}

.dlt {
  position: absolute;
  width: 20px;
  height: 20px;
  display: none;
  top: -7px;
  right: 3px;
  color: #ccc;
  font-size: 20px;
  z-index: 10;
}

.img_main {
  float: left;
  margin: 0 10px;
}

.img_desc {
  text-align: center;
  color: rgb(204, 204, 204);
}

.el-icon-plus-main {
  padding-top: 30px;
  font-size: 24px;
  font-weight: 600;
}

.el-card__header {
  padding: 14px 20px;
}
</style>
